import React, { useEffect } from "react";
import { Calendar, DateData, LocaleConfig } from "react-native-calendars";
import { router } from "expo-router";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/stores";
import { taskDateTimerSlice } from "@/stores/tasks/timer";
import { Button, Colors, Text, View } from "react-native-ui-lib";
import PageView from "@/components/base/page";
import { useTranslation } from "react-i18next";
import { useColor } from "@/hooks/color";
import { Dimensions } from "react-native";
import { useLoadedFontFamilyByAction } from "@/hooks/font";

LocaleConfig.locales["zh"] = {
  monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
  dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"],
};
LocaleConfig.defaultLocale = "zh";

const TimeChange: React.FC = ({}) => {
  const timer = useSelector<RootState, Slice.IItemTaskTimerSlice>(state => state.timer);
  const action = useDispatch<AppDispatch>();

  const onDayPressTimer = (day: DateData) => {
    action(taskDateTimerSlice.actions.set({ date: new Date(day.dateString).getTime() }));
    if (router.canGoBack()) router.back();
  };

  useEffect(() => {
    action(taskDateTimerSlice.actions.reset());
  }, []);

  const CalendarConfig: React.ComponentProps<typeof Calendar> = {
    current: new Date().toISOString().split("T")[0],
    onDayPress: onDayPressTimer,
    markedDates: {
      [timer.date.toString()]: {
        selected: true,
        selectedColor: useColor().color.action,
      },
    },
    theme: {
      calendarBackground: Colors.transparent,
      selectedDayBackgroundColor: useColor().color.action,
      selectedDayTextColor: useColor().color.action,
      todayTextColor: Colors.getColorTint(useColor().colors.primary, 50),
      dayTextColor: useColor().colors.text,
      textDisabledColor: useColor().color.action,
    },
    style: {
      width: Dimensions.get("window").width,
    },
  };
  return (
    <PageView>
      <View flex centerH useSafeArea padding-6>
        <View className='flex w-full items-center justify-center py-2'>
          <Text className='font-semibold text-2xl' style={{color: useColor().colors.text,...useLoadedFontFamilyByAction('SPACE_MONO')}}>{useTranslation().t("2011")}</Text>
        </View>
        <Calendar {...CalendarConfig} />
      </View>
    </PageView>
  );
};

export default TimeChange;
